/* 视频 */
.playwindow{
	 -moz-user-select:none; /*火狐*/
		-webkit-user-select:none; /*webkit浏览器*/
		-ms-user-select:none; /*IE10*/
		-khtml-user-select:none; /*早期浏览器*/
		user-select:none;
}
/* 全屏 */
.playwindow.full{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 99;
	background: #000;
}
.playwindow.full .fullback .playbox{
	max-width: 100%;
	padding: 0;
}
.playwindow.full .videobox video{
	height: calc(100vh - 75px);
}
/* 播放器容器 */
.playbox{
	background: #000;
	padding: 40px 10px 0 10px;
}
/* 电影模式 */
.fullback.active{
	position: fixed;
	background: #000;
	left: 0;
	top: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	transition: all 1s;
}
.fullback.active .playbox{
	max-width: 1000px;
}
/* 小窗口模式 */
.videobox.small{
	position: fixed;
	border: solid 5px #666;
	border-radius: 5px;
	z-index: 99;
	position: fixed;
	right: 10px;
	bottom: 50px;
}
.videobox{
	position: relative;
}
.videobox video{
	width: 100%;
	object-fit: cover;
}
/* 进度条 */
.progress{
	
	height: 3px;
	background: #999;
	border-radius: 3px;
	overflow: hidden;
	position: relative;
	cursor: pointer;
}
.progress .now{
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 100%;
	background: #ff6000;
	transition: all .5s linear;
}
/* 控件区 */
.consoles{
	display: flex;
	justify-content: space-between;
	height: 45px;
	font-size: 14px;
	color: #fff;
}
.group1,.group2{
	display: flex;
	padding: 10px;
	align-items: center;
}
.group1>*{
	margin-right: 10px;
}
.group2>*{
	margin-left: 10px;
}
/* 全屏按钮 */
.fullscreen{
	width: 25px;
	height: 25px;
	background: url(../images/fullscreen.svg) no-repeat center/100%;
	cursor: pointer;
}
/* 电影按钮 */
.movie{
	width: 22px;
	height: 16px;
	border: solid 2px #fff;
	border-radius: 5px;
	cursor: pointer;
}
/* 播放/暂停 */
.play{
	width: 25px;
	height: 25px;
	background: url(../images/play.svg) no-repeat center/100%;
	cursor: pointer;
}
.play.pause{
	background-image: url(../images/pause.svg);
}
/* 视频上播放/暂停 */
.videobox.show-play .video-play p{
	display: block;
}
.video-play{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
	align-items: center;
	justify-content: center;
	display: flex;
	
	cursor: pointer;
}
.video-play p{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	overflow: hidden;
	background: #ff6000  url(../images/play.svg) no-repeat center/60%;
	display: none;
}
.videobox.pause .video-play p{
	background-image: url(../images/pause.svg);
}
/* 停止 */
.stop{
	width: 18px;
	height: 16px;
	background: #fff;
	cursor: pointer;
}
/* 倍速 */
.speed-box{
	position: relative;
	
}
.speed-box .speed-list{
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	display: none;
	padding-bottom: 32px;
	z-index: 8;
}
.speed-box:hover .speed-list{
	display: block;
}
.speed-box .speed-content{
	border: solid 1px #333;
	background: #000;
}
.speed-box .speed-content div{
	line-height: 30px;
	text-align: center;
	cursor: pointer;
}
.speed-box .speed-content div:hover{
	background: rgba(255,255,255,.6);
}
/* 音量 */
.volume{
	display: flex;
	align-items: center;
}
.volume .muted{
	width: 25px;
	height: 25px;
	background: url(../images/volume.svg) no-repeat 0 center/100%;
	cursor: pointer;
}
.volume.active .muted{
	background-image: url(../images/volume_off.svg);
}
.volume .volume-change{
	width: 60px;
	height: 4px;
	background: #ccc;
	border-radius: 4px;
	position: relative;
}
.volume .vnow{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: orangered;
	border-radius: 4px;
}
.volume .v-slider{
	position: absolute;
	left: 54px;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	z-index: 5;
}
.volume .v-slider:after{
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #000;
}
.volume .volume-box{
	position: relative;
	display: flex;
	align-items: center;
	height: 12px;
	width: 66px;
}
.volume  .show-value{
	position: absolute;
	left: 0;
	bottom: 100%;
	font-size: 12px;
	color: #fff;
	text-align: center;
	width: 100%;
	display: none;
}